<template>
  <div id="detail-body">
    <div class="blog-head">
      <h2>{{blog.title}}</h2>
      <div v-show="isUser">
        <el-button type="primary" @click="editClick(blog.id)">编辑</el-button>
        <el-button type="danger" @click="deleteClick(blog.id)">删除</el-button>
      </div>
      <p>
        <span>创建于：{{blog.created}}</span>
        <span class="other" v-show="blog.updated">更新于：{{blog.updated}}</span>
        <span class="other">分类：{{blog.categories}}</span>
      </p>
      <p class="desc">{{blog.description}}</p>
    </div>
    <div v-html="blog.content" class="markdown-body" v-highlight />
<!--    <detail-footer class="footer"/>-->
  </div>
</template>

<script>
import {deleteBlog, getBlogById} from "@/network/blogRequest";
import {deleteFile} from "@/network/fileRequest";

import marked from "marked";

export default {
  name: "DetailBody",
  data() {
    return {
      blog: {
        id: "",
        title: "",
        description: "",
        content: "",
        created: "",
        updated: "",
        categories: ""
      }
    }
  },
  components: {
    // DetailFooter,
  },
  methods: {
    /**
     * 网络请求
     */
    getBlogById(id) {
      getBlogById(id).then(res => {
        this.blog = res.data;
        this.blog.content = marked(res.data.content);
      })
    },

    /**
     * 按钮点击
     */
    editClick(id) {
      this.$router.replace("/user/blog/" + id + "/edit");
    },
    deleteClick(id) {
      this.$confirm('确认删除？').then(_ => {
        deleteFile(JSON.stringify(id), JSON.stringify(null));
        deleteBlog(id).then(res => {
          alert("删除成功！")
          this.$router.replace("/user/blog/edit");
        });
      }).catch(_ =>{});
    }
  },
  computed: {
    isUser() {
      const id =this.$route.params.blogId;
      if(this.$route.path === "/user/blog/" + id) {
        return true;
      }
      return false
    }
  },
  mounted() {
    const id = this.$route.params.blogId;
    if(id) {
      this.getBlogById(id);
    }
  }
}
</script>

<style scoped>
  #detail-body {
    padding: 40px 35px;
    border: 1px solid #d5d5d5;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  }

  .blog-head {
    text-align: center;
  }

  #detail-body .blog-head h2{
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  #detail-body .blog-head span {
    font-size: 10px;
    color: #999999;
    padding: 0 10px;
  }

  #detail-body .blog-head .other {
    border-left: 1px solid #999999;
  }

  #detail-body .blog-head .desc {
    margin: 60px 0 40px 0;
    text-align: left;
  }

</style>